<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
    <style>
        .content {
            width: 320px;
            height: 280px;
            position: absolute;
            left: 50%;
            top: 45%;
            margin-top: -165px;
            margin-left: -165px;
            box-shadow: 3px 7px 10px #8b8a8a;
            border-radius: 1%;
        }
    </style>
</head>
<body>

<div class="content">
    <form class="layui-form layui-form-pane" style="margin:10px">
        <h1 style="text-align: center; margin-bottom: 10px; color: rgb(0,150,136);font-weight: bold">用户·登录</h1>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px"><i class="layui-icon layui-icon-username"></i> 用户名:</label>
            <div class="layui-input-inline">
                <input value="admin" type="text" name="username" autocomplete="off" class="layui-input" placeholder="用户名" lay-verify="required" lay-reqText="请输入用户名">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px"><i class="layui-icon layui-icon-password"></i> 密&nbsp;&nbsp;&nbsp;码:</label>
            <div class="layui-input-inline">
                <input value="123456" type="password" name="password" autocomplete="off" class="layui-input" placeholder="密码" lay-verify="required" lay-reqText="请输入密码">
            </div>
        </div>
        <!-- 滑块 -->
        <div class="layui-form-item" style="width: 290px;">
            <div id="slider"></div>
        </div>
        <div class="layui-form-item" style="margin-top: 15px;">
            <button style="width: 290px" type="button" class="layui-btn" lay-submit lay-filter="subBtnFilter"><i class="layui-icon layui-icon-release"></i> 登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录
            </button>
        </div>
    </form>
</div>
<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/resources/sliderVerify/'
    }).use(['form', 'layer', 'jquery', 'sliderVerify'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.jquery;
        let sliderVerify = layui.sliderVerify;//初始化滑块
        //初始化滑块
        var slider = sliderVerify.render({
            elem: '#slider',
        })
        //表单提交
        form.on("submit(subBtnFilter)", function (d) {
            let data = d.field;//获取表单数据
            // 使用ajax提交数据
            $.post("user/doLogin.do", data, function (rs) {
                //rs 是返回的数据  校验业务码
                layer.msg(rs.msg);
                if (rs.code != 200) {
                    //当业务码不是200  说明业务操作失败  将失败的原因进行展示
                    return false;
                }
                //操作成功则跳转到list.jsp
                location.href = "user/toList.do";
            })
            return false;//阻止表单默认提交行为
        });
    })
</script>
</body>
</html>